<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    相对定位：相对与原来的位置偏移(保留了原来的位置，依然在标准文档流中）-->
    <style>
        body{
            padding:60px;
        }
        div{
            margin: 10px;
            padding: 5px;
            font-size: 10px;
            line-height: 25px;
        }
        #father{
            border: 1px solid black;
            padding: 0px;
        }
        #first{
            background-color: #969896;
            border: 1px dashed #ce4444;
            position: relative;
            top:-20px;  /*距离上方-20,就是向上20px*/
            left:20px;/*距离左边20,就是向右移动20px*/
        }
        #second{
            background-color: #8a8659;
            border: 1px dashed rgb(204, 20, 218);
        }
        #third{
            background-color: #a273a6;
            border: 1px dashed #5ec51f;
            position: relative;
            bottom: -16px;
            right: 20px;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>